<script setup>
import {onMounted, reactive, ref} from "vue";
import temblorBeonduty from "@/api/temblor/temblorBeonduty.js";
import {Message} from "@arco-design/web-vue";

const activeKey = ref(1)
const paginate = reactive({
  page: 1,
  limit: 10,
  total: 0
})
const list = ref([])
onMounted(() => {
  getTableList()
})
const status = ref()
const getTableList = () => {
  loading.value = true
  temblorBeonduty.shiftList({
    type: activeKey.value,
    page: paginate.page,
    limit: paginate.limit,
    status: status.value
  }).then(res => {
    list.value = res.data.list
    paginate.total = res.data.total
    paginate.page = res.data.page
    paginate.limit = res.data.limit
    loading.value = false

  })
}
const tabClick = (key) => {
  activeKey.value = key
  paginate.page = 1
  paginate.limit = 10
  status.value = ''
  getTableList()
}
const changeStatus = val => {
  status.value = val
  getTableList()
}
const clearStatus = () => {
  status.value = ''
  getTableList()
}
const loading = ref(false)
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '用户名',
    dataIndex: 'for_user.username',
  },
  {
    title: '目标日期',
    dataIndex: 'shift_change_date',
  },
  {
    title: '目标星期',
    dataIndex: 'shift_change_week',
  },
  {
    title: '目标类型',
    dataIndex: 'shift_change_type',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '你的班次日期',
    dataIndex: 'apply_change_date'
  },
  {
    title: '你的星期',
    dataIndex: 'apply_change_week',
  },
  {
    title: '你的班次',
    dataIndex: 'apply_change_type',
  },


];



const applyYourColumns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '用户名',
    dataIndex: 'for_user.username',
  },
  {
    title: '目标日期',
    dataIndex: 'shift_change_date',
  },
  {
    title: '目标星期',
    dataIndex: 'shift_change_week',
  },
  {
    title: '目标类型',
    dataIndex: 'shift_change_type',
  },
  { 
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '他的班次日期',
    dataIndex: 'apply_change_date'
  },
  {
    title: '他的星期',
    dataIndex: 'apply_change_week',
  },
  {
    title: '他的类型',
    dataIndex: 'apply_change_type',
  },
  {
    title: '操作',
    slotName: 'action',
  }

];
const consent = (record) => {
  temblorBeonduty.agreeShift({
    id: record.id
  }).then(res => {
    if (res.code === 200) {
      Message.success('换班成功')
      getTableList()
    } else {
      Message.error('换班失败')
    }
  })
}
</script>

<template>

  <a-card>
    <a-layout>
      <a-spin :loading="loading" tip="加载中">

        <a-tabs :default-active-key="activeKey" @tab-click="tabClick" lazy-load>
          <a-tab-pane :key="1" title="你申请的">
            <a-form-item label="状态">
              <a-select v-model="status" @change="changeStatus" allow-clear @clear="clearStatus">
                <a-option :value="1">未处理</a-option>
                <a-option :value="3">不同意</a-option>
                <a-option :value="2">已处理</a-option>
              </a-select>
            </a-form-item>
            <a-table :columns="columns" :data="list"/>
          </a-tab-pane>
          <a-tab-pane :key="2" title="申请与你换班">
            <a-form-item label="状态">
              <a-select v-model="status" @change="changeStatus" allow-clear @clear="clearStatus">
                <a-option :value="1">未处理</a-option>
                <a-option :value="3">不同意</a-option>
                <a-option :value="2">已处理</a-option>
              </a-select>
            </a-form-item>
            <a-table :columns="applyYourColumns" :data="list">

              <template #action="{ record }">
                <a-space>
                  <a-popconfirm content="确定要换班吗?" @ok="consent(record)">
                    <a-button type="primary">同意</a-button>
                  </a-popconfirm>
                  <a-popconfirm content="确定要拒绝吗?" type="error">
                    <a-button status="danger" type="primary">拒绝</a-button>
                  </a-popconfirm>
                </a-space>
              </template>
            </a-table>

          </a-tab-pane>

        </a-tabs>
      </a-spin>
    </a-layout>
  </a-card>
</template>

<style scoped>

</style>